<template>
  <div v-if="!fetching">
    <div class="common-title">{{title}}</div>
    <div class="tags" :class="padding ? 'padding': ''">
      <div class="tag-item" v-for="item in tags" :key="item">
        <i class="iconfont icon-size-20 checked icon-check"></i>
        <span>{{item}}</span>
      </div>
    </div>
  </div>
  <template v-else>
    <div class="pc-skeleton">
      <div class="common-title skeleton-title">
        <Skeleton width="30%" height="40px"></Skeleton>
      </div>
      <div class="tags">
        <div class="tag-item" v-for="i in 5" :key="i">
          <Skeleton width="200px" pc></Skeleton>
        </div>
      </div>
    </div>
    <div class="mobile-skeleton">
      <div class="common-title skeleton-title">
        <Skeleton width="30%" height="120px"></Skeleton>
      </div>
      <div class="tags">
        <div class="tag-item" v-for="i in 5" :key="i">
          <Skeleton width="250px" mobile></Skeleton>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { inject } from "vue";

type Props = {
  title?: string;
  tags?: string[];
  padding?: boolean
};

const props = withDefaults(defineProps<Props>(),{
  padding: false
})

const fetching = inject('fetching')
</script>
<style scoped lang="less">
@import url('./header.less');
.skeleton-title {
  display: flex;
  justify-content: center;
}
</style>
